<!--
 * @Descripttion: 电商商品管理
 * @version:
 * @Author: 赵致喜
 * @Date: 2020-10-13 16:03:00
 * @LastEditors: 赵致喜
 * @LastEditTime:
-->
<template>
  <div>
    <div class="control-box">
      <!-- control 操作区 START -->
      <e-control :searchFormOptions="formOptions"
                 :search-label-width="searchLabelWidth"
                 :btns="btns"
                 @on-search="searchControlHandle"
                 @on-refresh="refreshControlHandle"
                 @change-height="changeControlHeight"
                 @on-set="set"
                 @on-cancel="cancel"
				 @upAll="doIt(1)"
				 @downAll="doIt(2)"
                 v-on="$listeners"></e-control>
      <!-- control 操作区 END -->
    </div>
    <div class="table-box">
      <!-- table 数据表格 START -->
      <e-table :data="tableData"
               :columns="columns"
               stripe
               border
               :maxHeight="tableMaxHeight"
               style="width: 100%"
               :tableBtnType="0"
               @selection-change="changeTableSelectData"
               :current="pageData.pageNum"
               :total="pageData.total"
               @page-size-change="changePageSize"
               @page-current-change="changePageCurrent">
        <template slot-scope="{scope}"
                  slot="goodsState">
          {{goodsStateMap[scope.row.goodsState]}}
        </template>
        <template slot-scope="{scope}"
                  slot="isAid">
          {{getAid(scope.row.isAid)}}
        </template>
        <template slot-scope="{scope}" slot="operation">
          <el-tooltip content="商品下架" placement="top">
            <el-button
              size="mini"
              type="danger"
              plain
              @click="handleSoldOut(scope.row)"><i class="iconfont iconxiajia"></i>
            </el-button>
          </el-tooltip>
          <el-tooltip content="上下架记录" placement="top">
            <el-button
              size="mini"
              type="primary"
              plain
              @click="handleView(scope.row)"><i class="iconfont el-icon-view"></i>
            </el-button>
          </el-tooltip>
          <el-tooltip content="外商品展示" placement="top">
            <el-button
              size="mini"
              type="warning"
              plain
              @click="handleOpenLine(scope.row)"><i class="iconfont el-icon-discover"></i>
            </el-button>
          </el-tooltip>
        </template>

      </e-table>
      <!-- table 数据表格 END -->
    </div>
    <!-- editDialog 上下架记录弹窗 START -->
    <el-dialog title="上下架记录"
               :visible.sync="editDialogShow"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               width="50%">
<!--      <e-table :data="shelfRecordList"-->
<!--               stripe-->
<!--               border-->
<!--               :maxHeight="tableMaxHeight"-->
<!--               style="width: 100%"-->
<!--               @selection-change="changeTableSelectData"-->
<!--               :current="pageData.pageNum"-->
<!--               :total="pageData.total"-->
<!--               @page-size-change="changePageSize"-->
<!--               @page-current-change="changePageCurrent">-->
<!--      </e-table>-->
      <el-table stripe border :data="shelfRecordList" style="width: 100%" height="500">
        <el-table-column label="上下架状态" prop="goodsStateOptional2"></el-table-column>
        <el-table-column label="时间">
          <template slot-scope="scope">
            {{scope.row.createTime| formeTime}}
          </template>
        </el-table-column>
        <el-table-column label="市场参考价" prop="goodsPrice"></el-table-column>
        <el-table-column label="链接">
          <template slot-scope="scope">
            <el-button type="primary" plain @click="productLine(scope.row.id)">查看详情</el-button>
          </template>
        </el-table-column>
        <el-table-column label="原因" width="140">
          <template slot-scope="scope">
            <el-popover placement="top" trigger="hover">
              <div class="cell-content">{{scope.row.describle}}</div>
              <p class="overflow" slot="reference">{{scope.row.describle}}</p>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          style="text-align: right;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="shelfPageData.pageNum"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="shelfPageData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="shelfPageData.total">
      </el-pagination>
    </el-dialog>
    <!-- editDialog 上下架记录弹窗 END -->
  </div>
</template>

<script>
import eControl from '@/components/e-control'
import { getListForManage, setIsAid, shelfHistory, setGoodsState } from '@/api/admin.api'
import { formOptions, btns } from './control'
import { columns } from './columns'
import moment from "moment";
export default {
  name: 'online-commodity-management',
  components: {
    eControl
  },
  props: {},
  data () {
    return {
      // 表格表头
      columns,
      // 表单配置项
      formOptions,
      searchLabelWidth: '100px',
      // 按钮组
      btns,
      // 编辑框是否展示
      editDialogShow: false,
      editDialogType: 0,
      // 编辑框表单数据
      dialogFormCurrent: {},
      // 查询表单
      searchFormData: {},
      // 控制区高度
      controlHeight: 0,
      // 表格数据
      tableData: [],
      // 上下架记录
      shelfRecordList:[],
      // 分页数据
      pageData: {
        // 当前分页
        pageNum: 1,
        // 分页条数
        pageSize: 10,
        // 数据总数
        total: 0
      },
      // 表格选中数据
      tableSelectData: [],
      goodsStateMap:{
        COMMIT:"新提交",
        PASS:"审核通过",
        RETURN:"退回修改",
        DOWN:"商品下架"
      },
      // 上下架历史分页
      shelfPageData:{
        // 当前分页
        pageNum: 1,
        // 分页条数
        pageSize: 10,
        // 数据总数
        total: 0
      },
      // 上下架商品ID
      productId:''
    }
  },
  watch: {},
  computed: {
    //表格最大高度
    tableMaxHeight () {
      return window.innerHeight - this.controlHeight - 160
    },
    // 操作列自定义按钮
    operationBtn () {
      let btns
      this.columns.map(item => {
        if (item.slotName === 'operation') {
          btns = item.btns || []
        }
      })
      return btns
    }
  },
  filters: {
    formeTime(val){
      return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ' '
    }
  },
  methods: {
	  doIt(t){
	  	  if(!this.tableSelectData || this.tableSelectData.length==0){
	  	    this.$message({
	  	        message: '请选择待操作的数据',
	  	        type: 'warning'
	  	      })
	  	    return;
	  	  }
	  	  let ids = [];
	  	  var arr = [];
	  	  for(let data of this.tableSelectData){
	  	    ids.push(data.id);
	  		arr.push(data)
	  	  }
	  	  var str = '';
	  	  if(t == 1){
	  		  str = 'PASS'
	  	  }else{
	  		  str = 'DOWN'
	  	  }
	  	  setGoodsState(str,ids).then(res => {
	  	    this.$message({
	  	        message: '操作成功',
	  	        type: 'success'
	  	      })
	  	    this.getTableData();
	  		for (var i = 0; i < arr.length; i++) {
	  			this.dataDetail = arr[i];
	  			this.changeHistory();
	  		}
	  	  })
	  },
    handleSizeChange(val) {
      this.shelfPageData.pageSize = val
      this.shelfHistory()
    },
    handleCurrentChange(val) {
      this.shelfPageData.pageNum = val
      this.shelfHistory()
    },
    /**
     * @description 查看上下架
     * @author 穆宏宇
     * @date 2020-10-30 11:59:51
     * @param
     * @return
     * */
    shelfHistory (){
      shelfHistory(this.productId,{
        current:this.shelfPageData.pageNum,
        size:this.shelfPageData.pageSize
      }).then(res=>{
        this.shelfRecordList = res.records
        this.shelfPageData.total = res.total
      })

    },
    set(){
      if(!this.tableSelectData || this.tableSelectData.length==0){
        this.$message({
          message: '请选择待操作的数据',
          type: 'warning'
        })
        return;
      }
      let ids = [];
      for(let data of this.tableSelectData){
        ids.push(data.id);
      }

      setIsAid(true,ids).then(res => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.getTableData();
      })
    },
    cancel(){
      if(!this.tableSelectData || this.tableSelectData.length==0){
        this.$message({
          message: '请选择待操作的数据',
          type: 'warning'
        })
        return
      }
      let ids = [];
      for(let data of this.tableSelectData){
        ids.push(data.id);
      }

      setIsAid(false,ids).then(res => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.getTableData();
      })
    },
    getAid(isAid){
      if(isAid == null || isAid==undefined) return ''
      if(isAid) return '是'
      return '否'
    },
    /**
     * @functionName init
     * @description 页面初始化
     * @author 张航
     * @date 2020-09-09 08:40:06
     * @version V1.0.0
     */
    init () {
      this.getTableData()
    },
    /**
     * @functionName searchControlHandle
     * @param {Object} data 查询参数
     * @description 查询
     * @author 张航
     * @date 2020-09-08 15:01:26
     * @version V1.0.0
     */
    searchControlHandle (data) {
      const {catalog, goodsState, goodsName, brandName, typeNo, supplierName, isAid,sku} = data
      this.searchFormData = {
        primaryCategory: (catalog && catalog.length >= 1) ? catalog[0] : '',
        secondaryCategory: (catalog && catalog.length >= 2)? catalog[1] : '',
        tertiaryCategory: (catalog && catalog.length >= 3) ? catalog[2] : '',
        goodsState,
        goodsName,
        brandName,
        typeNo,
        supplierName,
        isAid,
		sku
      }
      this.refreshPageCurrent()
    },
    /**
     * @functionName refreshControlHandle
     * @param {Object} data 重置后的数据
     * @description 重置查询条件
     * @author 张航
     * @date 2020-09-08 17:01:51
     * @version V1.0.0
     */
    refreshControlHandle (data) {
      this.searchFormData = data
    },
    /**
     * @functionName changeControlHeight
     * @param {String} height 控制区占用高度
     * @description 控制区高度变化
     * @author 张航
     * @date 2020-09-16 16:17:07
     * @version V1.0.0
     */
    changeControlHeight (height) {
      this.controlHeight = height
    },
    /**
     * @functionName changeTableSelectData
     * @param {Array} rows 选中数据
     * @description 表格选中数据改变
     * @author 张航
     * @date 2020-09-08 17:52:12
     * @version V1.0.0
     */
    changeTableSelectData (rows) {
      this.tableSelectData = rows
    },
    /**
     * @functionName checkTableSelectData
     * @return {Number} 返回结果
     * @description 方法描述
     * @author 张航
     * @date 2020-09-10 09:58:59
     * @version V1.0.0
     */
    checkTableSelectData () {
      if (this.tableSelectData.length === 0) {
        this.$alert('至少选择一条数据！', '提示', {
          confirmButtonText: '确定'
        })
      }
      return this.tableSelectData.length
    },
    /**
     * @functionName changePageSize
     * @param {Number} size 分页条数
     * @description 修改分页条数
     * @author 张航
     * @date 2020-09-08 17:57:06
     * @version V1.0.0
     */
    changePageSize (size) {
      this.pageData.pageSize = size
      this.getTableData()
    },
    /**
     * @functionName changePageCurrent
     * @param {Number} current 当前分页
     * @description 修改当前分页
     * @author 张航
     * @date 2020-09-08 18:02:03
     * @version V1.0.0
     */
    changePageCurrent (current) {
      this.pageData.pageNum = current
      this.getTableData()
    },
    /**
     * @functionName refreshPageCurrent
     * @description 重置当前分页
     * @author 张航
     * @date 2020-09-22 10:45:57
     * @version V1.0.0
     */
    refreshPageCurrent () {
      this.pageData.pageNum = 1
      this.getTableData()
    },
    /**
     * @functionName getTableData
     * @description 获取表格数据
     * @author 张航
     * @date 2020-09-08 17:59:45
     * @version V1.0.0
     */
    getTableData () {
      let tmpParam = { ...this.searchFormData, size: this.pageData.pageSize, current: this.pageData.pageNum, goodsSource:"DATA_CENTER" }
      if(this.searchFormData.category && this.searchFormData.category.length>0){
        if(this.searchFormData.category[0]){
          tmpParam.primaryCategory = this.searchFormData.category[0];
        }
        if(this.searchFormData.category[1]){
          tmpParam.secondaryCategory = this.searchFormData.category[1];
        }
        if(this.searchFormData.category[2]){
          tmpParam.tertiaryCategory = this.searchFormData.category[2];
        }
      }
      tmpParam.category=null
      getListForManage(tmpParam).then(res => {
        this.tableData = res.content
        this.pageData.total = res.totalElements
      })
    },
    /**
     * @functionName closeDialog
     * @description 关闭编辑框
     * @author 张航
     * @date 2020-09-08 14:27:02
     * @version V1.0.0
     */
    // closeDialog () {
    //   this.editDialogType = 0
    //   this.editDialogShow = false
    // },
  /**
   * @functionName handleView
   * @param {Object} data 商品数据
   * @desccription 商品下架
   * @author 穆宏宇
   * @date 2021-01-26 11:26:58
   * @version v1.0.0
   */
    handleSoldOut (data) {
      this.$confirm('是否确定下架此商品?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        setGoodsState("DOWN",[data.id]).then(res => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this.getTableData()
        })
      })
    },
    /**
    * @functionName handleView
    * @param {Object} data 商品数据
    * @desccription 上下架记录
    * @author 穆宏宇
    * @date 2021-01-26 11:26:58
    * @version v1.0.0
    */
    handleView (data) {
      this.productId = data.id
      this.shelfHistory()
      this.editDialogShow = true
    },
    /**
     * @functionName handleOpenLine
     * @param {Object} data 商品数据
     * @desccription 外商品展示
     * @author 穆宏宇
     * @date 2021-01-26 11:26:58
     * @version v1.0.0
     */
    handleOpenLine (data) {
      let routeUrl = this.$router.resolve({
        path: "/detail",
        query: {id:data.id}
      })
      window.open(routeUrl.href, '_blank')
    },
    productLine(id){
      let routeUrl = this.$router.resolve({
        path: "/detail",
        query: {id:id}
      })
      window.open(routeUrl.href, '_blank')
    },
    /**
     * @functionName interFaceEvent
     * @param {String|} url 请求地址
     * @param {Object} data 请求参数
     * @param {String} type 请求类型，默认为GET
     * @return {Promise} 返回结果
     * @description 接口访问
     * @author 张航
     * @date 2020-09-14 16:14:51
     * @version V1.0.0
     */
    interFaceEvent (url, data, type = 'GET') {
      // let _url = url
      const _type = type.toLowerCase()
      // if (_type === 'get') {
      //   _url = _url + this.$tools.urlParam(data)
      // }
      return this.$api[_type](url, data)
    }
  },
  created () { },
  mounted () {
    this.init()
  }
}
</script>
<style lang="scss">
.control-box {
  margin-bottom: 10px;
}
.line-height .el-form-item__content {
  line-height: 20px;
}
.cell-content {
  width: 200px;
  min-height: 20px;
  max-height: 200px;
  overflow-y: auto;
}
.overflow {
  width: 118px;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
  overflow: hidden;
}
</style>
